import React from 'react';
import '../../static/topic/topic.styl'
import {withRouter,Link} from 'react-router-dom'
import {Icon, Modal, message} from 'antd';
import Loading from '../common/Loading'
import axios from 'axios'

@withRouter
export default class Topic extends React.Component {
  state = {
    visible: false,
    singleList: [],
    index: 0,
    key: 1,
    loaded: false,
  };

  // 页面跳转
  goRouter(d) {
    console.log(d)
    this.props.history.push(d)
  }

  // 点击删除按钮显示弹框
  showModal = (id) => {
    this.setState({
      visible: true,
      index: id,
    });
  };
  // 点击确定触发事件
  handleOk = async () => {
    let res = await
      axios.post('vrv-monitor-platform-web/topic/delete', {
        id: this.state.index
      });
    if (res.data.statusCode === 200) {
      this.setState({visible: false});
      this.setState(prevState => ({
        singleList: prevState.singleList.filter(item => {
          return item.id !== this.state.index
        })
      }));
      localStorage.clear();
      message.success('删除成功');
    } else {
      this.setState({visible: false});
      message.error(res.data.message);
    }
  };
  // 点击取消触发事件
  handleCancel = () => {
    this.setState({
      visible: false
    });
  };
  // 查询专题列表
  querySingleTopic = async () => {
    this.setState({
      loaded: false
    });
    if(localStorage.topicList){
      this.setState(prevState => ({
        singleList: JSON.parse(localStorage.getItem('topicList')),
        loaded: true,
      }));
    }else{
      let res = await
        axios.get('vrv-monitor-platform-web/topic/read/list');
      if (res.data.statusCode === 200) {
        if(res.data.data.length>0){
          localStorage.setItem('topicList', JSON.stringify(res.data.data));
          this.setState(prevState => ({
            singleList: JSON.parse(localStorage.getItem('topicList')),
            loaded: true,
          }));
        }else{
          this.setState(prevState => ({
            loaded: true,
          }));
        }
      } else {
        this.setState({visible: false});
        message.error(res.data.message);
      }
    }
  };
  componentDidMount() {
    this.querySingleTopic()
  }
  render() {
    return (
      <div style={{backgroundColor: '#eff1f3', position: 'absolute', height: '100%', width: '100%'}}>
        <Modal
          title={<div>
            <div className="titleIcon">
              <Icon type="delete"/>
            </div>
            删除专题
          </div>}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okText="确认"
          cancelText="取消"
        >
          <p>此操作将永久删除该专题, 是否继续?</p>
        </Modal>
        {
          this.state.loaded ? <div>
            {
              this.state.singleList.length > 0 ?
                <div>
                  {
                    this.state.singleList.map((item, i) => {
                      return <div className="singleTopic" key={i}>
                        <div className="topicTitle">
                          <p>
                            {item.topicName}
                            <Icon type="ellipsis" className="topicEllipsis"/>
                          </p>
                          <p className="topicTime">
                            {item.monitorEndTime}
                          </p>
                        </div>
                        <div className="topicContent">
                          <Link to={'/topicDetails?index='+item.id+"&key="+1}>
                            <img src={require('./topicImg.png')} alt=""/>
                            <p className="topicText" style={{WebkitBoxOrient: "vertical"}}>{item.profileText}</p>
                          </Link>
                        </div>
                        <div className="topicOperate">
                          <div className="operateDelete" onClick={() => this.showModal(item.id)}>
                            <Icon type="delete" className="deleteColor"/>删除
                          </div>
                          <div className="operateEdit">
                            <Link to={'/topicDetails?index='+item.id+"&key="+4}>
                              <Icon type="form" className="editColor"/>编辑
                            </Link>
                          </div>
                        </div>
                      </div>
                    })
                  }
                </div> : ''
            }
            <div className="singleTopic">
              <div className="increase" onClick={() => (this.goRouter('/newTopic'))}>
                {/*<Link to={'/newTopic'}>*/}
                  <Icon type="plus" className="addIcon"/>新建专题
                {/*</Link>*/}
              </div>
            </div>
          </div> : <Loading/>
        }

      </div>
    );
  }
}